import React, { Component } from 'react';
import { StyleSheet, Navigator, Text, View, TabBarIOS, Dimensions, TouchableHighlight } from 'react-native';

import FourthHomePageView from '../fourthComponent/fourthHomePageView';
import MainScene from '../fourthComponent/MainScene';
import FirstScence from '../fourthComponent/FirstScence';
import SecondScence from '../fourthComponent/SecondScence';

const _windows = Dimensions.get('window');
const _width = _windows.width;
const _height = _windows.height;

class FourthTabBarItem extends Component {
    constructor(props, context) {
        super(props, context);
        this.navigationBarLeftButton = this.navigationBarLeftButton.bind(this);
        this.navigationBarRightButton = this.navigationBarRightButton.bind(this);
        this.navigationBarTitle = this.navigationBarTitle.bind(this);
        this.navigationRenderScene = this.navigationRenderScene.bind(this);
    };


    navigationBarLeftButton(route, navigator, index, navState) {

        if (index > 0 ) {
            return (
                <TouchableHighlight onPress={() => { navigator.pop(); }} >
                    <Text style={ styles.leftText} >{route.leftTitle||'返回'}</Text>
                </TouchableHighlight>
            );
        }
        return <View />;
    }

    navigationBarRightButton(route, navigator, index, navState) {

        const pushFromRight = Navigator.SceneConfigs.PushFromRight;
        pushFromRight.gestures.pop.edgeHitWidth = _width * 0.5;

        const nextRourer1 = {
            title: 'MainScene',
            component: MainScene,
            SceneConfigs: pushFromRight,
            leftTitle: '返回',
            rightTitle: 'second',
            rightButtonAction: route.rightButtonAction,
        };

        const nextRourer2 = {
            title: '银行卡列表',
            component: FirstScence,
            SceneConfigs: pushFromRight,
            leftTitle: '后退',
            rightTitle: 'three',
            rightButtonAction: route.rightButtonAction,
        };

        const nextRourer3 = {
            title: '互联网金融',
            component: SecondScence,
            SceneConfigs: pushFromRight,
            leftTitle: '消失',
            rightTitle: '',
            rightButtonAction: route.rightButtonAction,
        };

        if (route.rightTitle !== '') {
            if (index == 0) {
                return (
                    <TouchableHighlight onPress={() => {navigator.push(nextRourer1); }} >
                        <Text style={ styles.rightText } >{route.rightTitle}</Text>
                    </TouchableHighlight>
                );
            }
            if (index == 1) {
                return (
                    <TouchableHighlight onPress={() => { navigator.push(nextRourer2); }} >
                        <Text style={ styles.rightText } >{route.rightTitle}</Text>
                    </TouchableHighlight>
                );
            }
            if (index == 2) {
                return (
                    <TouchableHighlight onPress={() => { navigator.push(nextRourer3); }} >
                        <Text style={ styles.rightText } >{route.rightTitle}</Text>
                    </TouchableHighlight>
                );
            }
        }

        return <View />;
    }

    navigationBarTitle(route) {
        return (<Text style={ styles.centerText } >{ route.title }</Text>);
    }

    navigationBar(){
        return (
            <Navigator.NavigationBar
                style={{ padding:20,  backgroundColor: '#786323'}}
                routeMapper={{
                    LeftButton: this.navigationBarLeftButton,
                    RightButton: this.navigationBarRightButton,
                    Title: this.navigationBarTitle,
                }}
            />
        );
    }

    navigationRenderScene(route, navigator){
        return <route.component navigator={navigator} {...route.passProps} />;
    }

    configureScene(route, routeStack) {

        alert(route.title);

        if(route.SceneConfigs){
            return route.SceneConfigs;
        }
        const pushFromRight =  Navigator.SceneConfigs.PushFromRight;
        pushFromRight.gestures.pop.edgeHitWidth = 160;
        return Navigator.SceneConfigs.PushFromRight;
    }

    render() {
        return (
            <Navigator
                initialRoute={{
                    title: 'navigator 练习',
                    component: FourthHomePageView,
                    rightTitle: 'first',
                }}
                configureScene={this.configureScene.bind(this)}
                renderScene={this.navigationRenderScene}
                navigationBar={this.navigationBar()}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red',
    },
    leftText: {
        color: '#FFFFFF',
        paddingTop: 10,
        paddingLeft: 14,
        fontSize: 16,
    },
    rightText: {
        color: '#FFFFFF',
        paddingTop: 10,
        paddingRight: 14,
        fontSize: 16,

    },
    centerText: {
        color: '#FFFFFF',
        paddingTop: 10,
        fontSize: 16,


    },
});

export default FourthTabBarItem;